@extends('layouts.base')

@section('title',$article->title)
@section('description', $article->excerpt)
@section('keyWords',$article->seo_word.'|'.$article->title)

@section('content')
    <article class="well">
        @include('articles.breadCrumb')

        <h1 class="text-center lead text-warning">{{ $article->title }}

            @if(Auth::id() == 1)
                <a href="/article/{{$article->id}}/edit" class="btn btn-danger btn-sm">编辑</a>
            @endif

        </h1>


        <hr>

        <ul class="list-inline pull-right text-info">
            <li>
                <span class="glyphicon glyphicon-calendar"></span>
                发布于
                <time class="entry-date published" datetime="{{ $article->created_at }}">{{ $article->created_at->diffForHumans() }}</time>
            </li>
            <li>
                <span class="glyphicon glyphicon-time"></span>
                更新于
                <time class="entry-date last-updated" datetime={{ $article->updated_at }}>{{ $article->updated_at->diffForHumans() }}</time>
            </li>
            <li>
                <span class="glyphicon glyphicon-eye-open"></span>浏览:{{$article->vote->visit}}
            </li>
            <li>
                <span class="glyphicon glyphicon-th"></span>收藏:{{ $article->vote->favorate_count}}
            </li>
        </ul>


        {{--文章正文--}}
        <p>{!! $article->body !!}</p>
        @if(!empty($article->video_code))
            <hr>
            {!! $article->video_code !!}
        @endif
    </article>


    {{--用户评分--}}
    <div class="well well-sm">
        <form class="form-horizontal">
            <div class="form-group row">
                <label for="input-score" class="control-label col-md-4 col-sm-4 col-xs-4">当前有<strong
                            id="vote_count">
                        {{empty($article->vote) ? 0 : $article->vote->vote_count}}

                    </strong>人评价平均分:</label>
                <input id="input-score" name="input-name" type="number" class="rating col-md-8 col-sm-8 col-xs-8"
                       value="{{empty($article->vote) ? 0 : $article->vote->score}}" min=0 max=5 step=0.1 data-size="sm"
                       data-show-clear="false"
                       data-show-caption="{{empty($article->vote) ? 0 : $article->vote->score}}" data-readonly="true">
            </div>
            <div class="form-group row">
                <label for="input-rating" class="control-label col-md-4 col-sm-4 col-xs-4 lead">您的评分:</label>
                <input id="input-rating" name="input-name" type="number"
                       class="rating-loading col-md-8 col-sm-8 col-xs-8" min=0 max=5 step=0.1 data-size="sm"
                       data-show-clear="false">
            </div>
        </form>


        {{--标签tags相关--}}
        @if($article->shows->count()>0)
            <ul class="list-inline ">
                <li>相关美剧:</li>
                @foreach($article->shows as $show)
                    <li>
                        <a href="{{route('show.show',$show)}}" role="button" data-toggle="tooltip" data-placement="top"
                           title="{{$show->name_en}}"> <span class="glyphicon glyphicon-grain"
                                                             aria-hidden="true"></span>
                            {{$show->name_zh}}</a>
                    </li>
                @endforeach
            </ul>
        @endif

        @if($article->movies->count()>0)
            <ul class="list-inline ">
                <li>相关电影:</li>
                @foreach($article->movies as $movie)
                    <li>
                        <a href="{{route('movie.show',$movie)}}" role="button" data-toggle="tooltip"
                           data-placement="top" title="{{$movie->name_en}}"> <span
                                    class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
                            {{$movie->name_zh}}</a>
                    </li>
                @endforeach
            </ul>
        @endif
        @if($article->tags->count()>0)
            <ul class="list-inline ">
                <li>文章标签:</li>
                @foreach($article->tags as $tag)
                    <li>
                        <a href="{{route('movie.show',$tag)}}">
                            <i class="glyphicon glyphicon-tags"></i>
                            {{$tag->name}}
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
        <ul class="list-inline ">
            <li>其他信息:</li>
            @if(strlen($article->url_video)>5)
                <li>
                    <a href={!!$article->url_video!!}>视频链接地址</a>
                </li>
            @endif
            <li>
                <a href="http://news.trytv.org">发布人:Eric Zhou</a>
            </li>
            @if(strlen($article->url_provider)>5)
                <li>
                    <a href="{!!$article->url_provider!!}" rel="nofollow" target="_blank">原创链接地址</a>
                </li>
            @endif
            <li>
                更新时间:{{$article->updated_at}}
            </li>
            <li>
                创建时间:{{$article->created_at}}
            </li>

        </ul>

    </div>




@endsection


@section('rightSideBar')
    @include('articles.articleRelatedEntity')
@endsection



@section('scripts')
    <script type="text/javascript">
        $('article img').addClass('img-responsive').attr('style', null).width('100%');


        //aritcle 图片样式修改 w-100
        //这个地方图片加载两次
        var jsonImages = JSON.parse('{!! $imgs !!}');
        $('article img').each(function (idx, ele) {
            $(ele).addClass('img-thumbnail w-100').removeProp('style').removeAttr('style');
            $(jsonImages).each(function (idex, obj) {
                if (obj.fname == $(ele).attr('src')) {
                    $(ele).attr('src', obj.src)
                }
            });
        });


        $(document).on('ready', function () {
            $('#input-rating').rating({clearCaption: '请评分'});
            $('#input-rating').on('rating.change', function (event, value, caption) {
                $.post("{{url('vote/forArticle')}}",
                    {
                        '_token': '{{csrf_token()}}',
                        id: "{{$article->id}}",
                        score: value
                    },
                    function (data, status) {
                        var returnScore = data.score.toFixed(2);
                        $('#input-score').rating('update', returnScore);
                        $('#input-rating').rating('refresh', {disabled: true, showClear: false, showCaption: true});
                        $('#vote_count').text(data.vote_count);
                    });

            });
        })
    </script>

@endsection


@section('ld_json')
    <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "NewsArticle",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{url()->current()}}"
          },
          "headline": "{{$article->title}}",
          "image": {
            "@type": "ImageObject",
            "url": "{{$article->jsonld_logo}}",
            "height": 450,
            "width": 800
          },
          "datePublished": "{{$article->updated_at}}",
          "dateModified": "{{$article->created_at}}",
          "author": {
            "@type": "Person",
            "name": "Eric Zhou"
          },
          "publisher": {
            "@type": "Organization",
            "name": "TRY美剧",
            "logo": {
              "@type": "ImageObject",
              "url": "http://www.trytv.org/trytv_logo_v2.png",
              "width": 294,
              "height": 60
            }
          },
          "description": "{{$article->excerpt}}"
        }
    </script>
@endsection

